<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
    <head ng-controller="titleCtrl">
        <title ng-model="title">{{ title }} - 在线课堂</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="//cdn.bootcss.com/angular.js/1.2.5/angular.js"></script>
        <script src="//cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
        <link type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="js/Controller.js"></script>
    </head>
    <body>
        <div ng-include="'navbar.html'"></div>
        <!-- Container -->
        <div class="container" style="margin-top:70px" ng-controller="courseCtrl">
            <div class="row">
                <!-- 主页面 -->
                <div class="col-md-9 col-xs-8">
                    <!-- 课程标题栏 -->
                    <div class="row">
                        <section style="margin-left:30px">
                            <h2>{{ course.course_cname }}</h2>
                            <p>{{ course.course_desc }}</p>
                        </section>
                    </div>
                    <!-- 课程章节栏 -->
                    <div class="row">
                        <ul style="margin-top:20px;list-style:none" class="col-md-11" ng-model="chapters">
                            <li ng-repeat="x in chapters">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <h4><small>章节{{ x.chapter_num }}</small>&nbsp;&nbsp;{{ x.chapter_name }}</h4>
                                    </div>
                                    <div class="panel-body">
                                        {{ x.chapter_rem }}
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <hr>
                    <!-- 底部栏 -->
                    <div class="row">
                        <div class="col-md-11">
                            <!-- 评价面板 -->
                            <div class="panel panel-primary">
                                <!-- 评价头信息 -->
                                <div class="panel-heading">
                                    <h4>满意度评价：<i style="font-size:25px">{{ averageScore }}</i><span class="pull-right hidden-xs" style="font-size:12px;margin-top:10px;">评价人数：{{ commentCount }}</span></h4>
                                </div>
                                <!-- 评价具体信息 -->
                                <div class="panel-body">
                                    <p class="text-right">精选最精彩的评论</p>
                                </div>
                                <!-- 评价详细信息 -->
                                <div class="panel-footer">
                                    <div class="row">
                                        <!-- 具体引用 -->
                                        <div id="blockquote">
                                            <blockquote ng-repeat="x in comments">
                                                <heading>#{{$index+1}} {{x.stu_name}}</heading>
                                                <p style="margin-left:22px">{{x.comment_content}}</p>
                                                <footer class="text-right">发表时间 <cite title="Source Title">{{x.comment_time}}</cite></footer>
                                            </blockquote>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边栏 -->
                <div class="col-md-3 col-xs-4">
                    <!-- 标题信息 -->
                    <div class="row">
                        <h3>讲师信息</h3>
                    </div>
                    <!-- 教师头像 -->
                    <div class="row">
                        <img alt="140x140" src="images/avator.jpg" class="img-circle col-md-offset-3" />
                    </div>
                    <!-- 教师信息 -->
                    <div class="row" style="margin-top:10px;" ng-model="teacher">
                        <article>
                            <h4 class="text-center">{{teacher.tch_name}} {{teacher.tch_zc}}</h4>
                            <table class="table">
                                <tr>
                                    <td><b>所属学院:</b></td>
                                    <td>{{teacher.tch_address}}  {{teacher.tch_school}}</td>
                                </tr>
                                <tr>
                                    <td><b>专注领域:</b></td>
                                    <td>{{teacher.tch_focus}}</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center" style="font-family:Kaiti;font-style:inherit;font-size:20px">{{teacher.tch_desc}}</td>
                                </tr>
                            </table>
                        </article>
                    </div>
                    <!-- 开始按钮 -->
                    <div class="row block-center">
                        <a href="chapter.html"><button class="btn btn-danger btn-large" style="width:100%"><span style="font-size:40px;font-family: Microsoft YaHei">开始学习</span></button></a>
                    </div>
                </div>
            </div>

        </div>
    </body>
</html>
